<template>
  <div>
    <div class="charts-wrapper">
      <div v-if="new_node_flag||this.$root.new_link_flag||this.$root.modify_nodeLocation_flag" class="mask"></div>
      <div class="vertical-wrapper" :class="drawerState?'with-drawer':'no-drawer'">
        <float-tools>
          <el-button slot="create-node" size="mini" @click="createNode">
            新建点<i class="el-icon-eleme"></i>
          </el-button>
          <el-upload slot="import-charts" action="http://101.200.57.150:8001/file/import_graph"
                     :file-list="fileList"
                     :on-success="importChart"
                     accept="text/csv"
                     :show-file-list="false">
            <el-button size="mini">
              导入图谱<i class="el-icon-pie-chart"></i>
            </el-button>
          </el-upload>
        </float-tools>
        <div id="main" class="charts-bench">
        </div>
      </div>
      <!--        向子组件传递visible参数，书写方法修改visible的值以实现点击节点弹出工具箱-->
      <right-drawer :visible="drawerState">
        <node-form v-if="dataToForm.type==='node'" :data-to-form="dataToForm"
                   :updateMyCharts='updateMyCharts' :closeDrawer='closeDrawer'></node-form>
        <edge-form v-if="dataToForm.type==='edge'" :data-to-form="dataToForm"
                   :updateMyCharts='updateMyCharts' :closeDrawer='closeDrawer'></edge-form>
      </right-drawer>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>
    import {mapActions} from "vuex";
    import rightDrawer from "../components/basicFrame/rightDrawer";
    import floatTools from "./toolsBar/floatTools";
    import nodeForm from "./form/nodeForm";
    import edgeForm from "./form/edgeForm";

    export default {
        name: "centerBench",
        data() {
            return {
                defaultOption: {},
                drawerState: false,
                chartState: false,
                dataToForm: {
                    type: "",
                    info: {
                        data: {
                            category: 0,
                        }
                    }
                },
                new_node_flag: false,
                node_info_source: {},
                node_info_target: {},
                link_info: {},
                fileList: []
            };
        },
        mounted() {
            this.defaultOption = {
                color: [
                    "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"
                ],
                title: {
                    text: "KG Demo",
                    subtext: "示例图谱",
                    top: "bottom",
                    left: "right"
                },
                tooltip: {},
                toolbox: {
                    show: true,
                    orient: "horizontal",
                    itemSize: 15,
                    itemGap: 20,
                    showTitle: true,
                    feature: {
                        myAddNode: {
                            title: "添加节点",
                            icon: "path://M928.16 552.704H552.704v375.456h-68.256V552.672H108.96V484.48l375.488-0.064V108.96h68.256V484.48h375.456z",
                            onclick: this.createNode
                        },
                        restore: {
                            title: "复位"
                        },
                        saveAsImage: {
                            type: "png",
                            title: "导出图片"
                        },
                        mySaveAsXml: {
                            title: "导出xml",
                            icon: "path://M733.866667 755.456H556.2368c-14.421333 0-26.112 12.475733-26.112 27.869867v168.618666h28.433067L733.866667 760.439467v-4.983467zM733.866667 699.733333v-88.183466c0-15.189333 11.4688-27.477333 25.6-27.477334s25.6 12.288 25.6 27.477334v160.136533c0 7.2192-2.645333 14.1312-7.338667 19.285333L587.554133 998.7072a24.746667 24.746667 0 0 1-18.261333 8.226133H186.026667C121.002667 1006.933333 68.266667 950.306133 68.266667 880.452267V143.530667C68.266667 73.693867 121.002667 17.066667 186.026667 17.066667h481.28C732.330667 17.066667 785.066667 73.693867 785.066667 143.547733v48.930134c0 15.189333-11.4688 27.477333-25.6 27.477333s-25.6-12.288-25.6-27.477333V143.530667c0-39.4752-29.7984-71.492267-66.56-71.492267H186.026667c-36.7616 0-66.56 32.017067-66.56 71.509333v736.887467c0 39.4752 29.7984 71.492267 66.56 71.492267H477.866667v-168.618667C477.866667 737.160533 512.955733 699.733333 556.2368 699.733333H733.866667zM240.725333 290.133333h47.1552l44.5952 83.114667L398.677333 290.133333h47.1552l-94.293333 113.7664 68.9152 121.685334h-47.1552l-48.827733-91.016534-72.533334 91.016534H204.8l99.925333-121.685334L240.725333 290.133333z m252.0576 0h45.175467l56.098133 184.661334h1.314134L699.221333 290.133333h45.175467l-30.651733 235.451734h-38.570667l21.111467-162.235734h-1.314134l-90.385066 162.235734h-33.297067l-48.128-162.235734h-1.3312l-21.111467 162.235734h-38.587733L492.782933 290.133333z m314.709334 0h38.263466L819.370667 492.612267h127.300266l-4.3008 32.9728h-165.546666L807.492267 290.133333z",
                            onclick: this.exportAsXml
                        }
                    },
                    right: 15
                },
                legend: [{
                    data: ["机关", "人物", "材料", "证明", "事项"],
                    zlevel: 0,
                    z: 4,
                    show: true,
                    orient: "horizontal",
                    left: "center",
                    top: 0,
                    align: "auto",
                    backgroundColor: "rgba(0,0,0,0)",
                    borderColor: "#ccc",
                    borderRadius: 0,
                    borderWidth: 0,
                    padding: 5,
                    itemGap: 10,
                    itemWidth: 25,
                    itemHeight: 14,
                    inactiveColor: "#ccc",
                    inactiveBorderColor: "#ccc",
                    itemStyle: {borderWidth: 0},
                    textStyle: {color: "#333"},
                    selectedMode: true,
                    selector: false,
                    selectorLabel: {
                        show: true,
                        borderRadius: 10,
                        padding: [3, 5, 3, 5],
                        fontSize: 12,
                        fontFamily: "sans-serif",
                        color: "#666",
                        borderWidth: 1,
                        borderColor: "#666"
                    },
                    emphasis: {
                        selectorLabel: {
                            show: true,
                            color: "#eee",
                            backgroundColor: "#666"
                        }
                    },
                    selectorPosition: "auto",
                    selectorItemGap: 7,
                    selectorButtonGap: 10,
                    tooltip: {show: false},
                    selected: {},
                }],
                animationDuration: 1500,
                animationEasingUpdate: "quinticInOut",
                series: [
                    {
                        name: "Demo",
                        type: "graph",
                        layout: "none",
                        roam: true,
                        draggable: true,
                        focusNodeAdjacency: true,
                        label: {
                            position: "inside",
                            formatter: "{b}",
                            color: "white",
                            textBorderColor: "inherit",
                            textBorderWidth: 2.2,
                            show: true
                        },
                        labelLayout: {
                            moveOverlap: "shiftX"
                        },
                        lineStyle: {
                            color: "source",
                            curveness: 0.3,
                            width: 2,
                            opacity: 1
                        },
                        emphasis: {
                            focus: "adjacency",
                            lineStyle: {
                                width: 2.5,
                            },
                            scale: true,
                            label: {
                                show: true
                            },
                            edgeLabel: {},
                        },
                        zlevel: 0,
                        z: 2,
                        coordinateSystem: "view",
                        legendHoverLink: true,
                        circular: {rotateLabel: false},
                        force: {
                            initLayout: null,
                            repulsion: [0, 50],
                            gravity: 0.1,
                            edgeLength: [20, 50],
                            layoutAnimation: true
                        },
                        left: "center",
                        top: "center",
                        symbol: "circle",
                        symbolSize: 10,
                        edgeSymbol: [
                            "none", "arrow"
                        ],
                        edgeSymbolSize: 10,
                        edgeLabel: {
                            position: "middle",
                            distance: 5
                        },
                        center: null,
                        zoom: 1,
                        nodeScaleRatio: 0.6,
                        itemStyle: {},
                        select: {
                            itemStyle: {
                                borderColor: "#212121"
                            }
                        }
                    }
                ],
            };
            this.createChart();
            window.onresize = () => {
                let myChart = this.$echarts.getInstanceByDom(document.getElementById("main"));
                myChart.resize({width: "auto", height: "auto"});
            };
        },
        destroyed() {
            window.onresize = null;
        },
        components: {
            rightDrawer,
            floatTools,
            nodeForm,
            edgeForm,
        },
        methods: {
            ...mapActions([
                "exportGraphXml",
                "importGraph"
            ]),
            exportAsXml() {
                let myChart = this.$echarts.getInstanceByDom(document.getElementById("main"));
                // let xmlName = myChart.getOption().title[0].text;
                let xmlName = "Test";
                this.exportGraphXml(xmlName);
            },
            importChart(response, file, fileList) {
                let dataNodes = response.data.nodes;
                let dataLinks = response.data.links;
                let option = {
                    nodes: [],
                    links: []
                };
                for (let dataNode of dataNodes) {
                    let node = {
                        id: dataNode.uuid,
                        symbolSize: dataNode.r,
                        name: dataNode.name
                    };
                    option.nodes.push(node);
                }
                for (let dataLink of dataLinks) {
                    let link = {
                        source: dataLink.sourceId,
                        target: dataLink.targetId,
                        value: dataLink.name
                    };
                    option.links.push(link);
                }
                this.defaultOption.series[0].nodes = option.nodes;
                this.defaultOption.series[0].links = option.links;
                this.defaultOption.series[0].layout = "circular";
                let myChart = this.$echarts.getInstanceByDom(document.getElementById("main"));
                myChart.setOption(this.defaultOption);
                this.$message.success("导入成功");
            },
            openDrawer() {
                this.drawerState = true;
            },
            closeDrawer() {
                this.drawerState = false;
            },
            createNode() {
                this.new_node_flag = true;
                this.$root.modify_nodeLocation_flag = false;
            },
            createChart() {
                this.$root.new_link_flag = 0;
                this.new_node_flag = 0;
                var myChart = this.$echarts.init(document.getElementById("main"));
                let graph = this.$root.graph;

                this.defaultOption.series[0].nodes = graph.nodes;
                this.defaultOption.series[0].links = graph.links;
                this.defaultOption.series[0].categories = graph.categories;
                myChart.setOption(this.defaultOption);
                this.$root.new_link_flag = false;
                // initInvisibleGraphic();

                //关系图元素点击监听，内涵新建边方法
                // @param 所点击边的信息
                myChart.on("click", (param) => {
                    //获取节点点击的数组序号
                    this.dataToForm.info = param;
                    this.dataToForm.type = param.dataType;
                    if (param.dataType === "edge") {
                        this.link_info = param;
                        this.openDrawer();
                    } else if (param.dataType === "node" && !this.$root.new_link_flag) {
                        this.node_info_source = param;
                        this.openDrawer();
                    } else if (param.dataType === "node" && this.$root.new_link_flag) {
                        this.openDrawer();
                        this.node_info_target = param;
                        let new_link = {};
                        if (this.$root.new_link_style !== "") {
                            new_link = {
                                source: this.node_info_source.dataIndex,
                                target: this.node_info_target.dataIndex,
                                lineStyle: this.$root.new_link_style.lineStyle,
                                symbol: this.$root.new_link_style.symbol
                            };

                            this.$root.new_link_style = "";
                        } else {

                            new_link = {
                                source: this.node_info_source.dataIndex,
                                target: this.node_info_target.dataIndex
                            };
                        }
                        this.$root.graph.links.push(new_link);
                        myChart.setOption({
                            series: {
                                links: this.$root.graph.links
                            }
                        });
                        this.$root.new_link_flag = false;
                    }
                });
                //页面点击监听，内涵新建点方法
                myChart.getZr().on("click", params => {
                    if (this.new_node_flag) {
                        var tmpPos = myChart.convertFromPixel({"seriesIndex": 0}, [params.offsetX, params.offsetY]);


                        let newNode = {
                            id: this.$root.graph.nodes.length + "",
                            name: "NewNode" + this.$root.graph.nodes.length,
                            symbolSize: 55,
                            category: 0,
                            x: tmpPos[0],
                            y: tmpPos[1],
                            value: 4
                        };
                        this.$root.graph.nodes.push(newNode);
                        myChart.setOption({
                            series: {
                                data: this.$root.graph.nodes
                            }
                        });

                        this.new_node_flag = false;
                    }

                    if (this.$root.modify_nodeLocation_flag) {
                        var tmpPos2 = myChart.convertFromPixel({"seriesIndex": 0}, [params.offsetX, params.offsetY]);
                        this.$root.graph.nodes[this.dataToForm.info.dataIndex].x = tmpPos2[0];
                        this.$root.graph.nodes[this.dataToForm.info.dataIndex].y = tmpPos2[1];
                        myChart.setOption({
                            series: {
                                data: this.$root.graph.nodes
                            }
                        });
                    }
                    this.new_node_flag = false;
                    this.$root.modify_nodeLocation_flag = false;
                    // this.$root.new_link_flag=false;

                });

            },

            updateMyCharts() {
                let myChart = this.$echarts.getInstanceByDom(document.getElementById("main"));
                myChart.setOption({
                    series: {
                        data: this.$root.graph.nodes,
                        links: this.$root.graph.links,
                        categories: this.$root.graph.categories,
                    }
                });

            }
        }
    };
</script>

<style scoped>
    @import "../assets/styles/bench.css";

    .vertical-wrapper {
        display: flex;
        flex-flow: column;
        position: relative;
        width: 100%;
        margin: 40px auto 50px auto;
    }

    .mask {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 2;
    }


    .charts-bench {
        margin: auto;
        height: 100%;
        width: 70%;

        padding: 14px;
        border-radius: 10px;
        box-shadow: 0 0 3px 3px #eeeeee;
        z-index: 3;

        background-color: white;
    }
</style>
